<template>
  <div
      style="width:100%;border-top-left-radius: 0.4rem;border-top-right-radius: 0.4rem;padding: 0 0.3rem;margin-top: 0.3rem;background-color: #fff">
    <div style="display: flex;justify-content: space-between;align-items: center;padding-top: 0.2rem">
      <van-icon size="0.8rem" name="play-circle-o"/>
      <span style="font-size: 0.3rem">播放全部(共{{ canshu2.length }}首)</span>
      <van-button round icon="plus" color="red" type="primary">收藏{{ subscribedCount }}</van-button>
    </div>
    <!--歌曲列表-->
    <div>
      <div style="display: flex;justify-content: space-between;align-items: center;margin: 0.4rem 0"
           v-for="(item,index) in canshu2"
           :key="index">
        <div style="display: flex;align-items: center" @click="playThisMusic(index)">
          <div style="text-align: right;width: 0.5rem">
            <span>{{ index + 1 }}</span>
          </div>
          <div style="display: flex;flex-direction: column;margin-left: 0.6rem">
            <span style="font-weight: bold">{{ item.name }}</span>
            <div style="margin-top: 0.1rem">
              <span style="color: #999" v-for="(item2,index) in item.ar" :key="index">{{
                  item2.name
                }}&nbsp;&nbsp;</span>
            </div>
          </div>
        </div>
        <div>
          <van-icon size="0.6rem" name="video" v-if="item.mv!=0"/>
          <van-icon size="0.6rem" name="bars"/>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {mapMutations} from "vuex/dist/vuex.mjs";

export default {
  name: "ItemMusicList",
  // subscribedCount:收藏量
  props: ['canshu2', 'subscribedCount'],
  methods: {
    // dayin() {
    //   console.log(this.canshu2)
    // }
    // 点击哪首歌，播放哪首
    playThisMusic(i) {
      this.qiege(this.canshu2)
      this.updatePlayMusicIndex(i)
    },
    ...mapMutations('footer', ['qiege', 'updatePlayMusicIndex'])
  },
  mounted() {
    // 结果为undefined
    // console.log(this.props)
  },

}
</script>

<style scoped>

</style>